<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="en">
<!--icheck-->
<link href="../js/iCheck/skins/minimal/minimal.css" rel="stylesheet">
<link href="../js/iCheck/skins/square/square.css" rel="stylesheet">
<link href="../js/iCheck/skins/square/red.css" rel="stylesheet">
<link href="../js/iCheck/skins/square/blue.css" rel="stylesheet">

<!--dashboard calendar-->
<link href="../css/clndr.css" rel="stylesheet">

<!--Morris Chart CSS -->
<link rel="stylesheet" href="../js/morris-chart/morris.css">

<!--common-->
<link href="../css/style.css" rel="stylesheet">
<link href="../css/style-responsive.css" rel="stylesheet">

<script src="http://s1.bdstatic.com/r/www/cache/ecom/esl/1-6-10/esl.js"></script>
<link href="../bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="http://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
<script src="../bootstrap/dist/js/bootstrap.min.js"></script>
<script type="text/javascript">
    //aj请求count
    $(document).ready(function() {
        $.ajax({
            url:'device/getDashJson',
            data: {},
            dataType:'json',
            success:function(data){
                $("#countofallapk").html(data.countofallapk);
                $("#countofalldevice").html(data.countofalldevice);
                $("#countofandapk").html(data.countofandapk);
                $("#countofanddevice").html(data.countofanddevice);
                $("#countofiosapk").html(data.countofiosapk);
                $("#countofiosdevice").html(data.countofiosdevice);

            }
        });
    });
</script>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>设备信息列表</title>
    <style>
        #main-nav {
            margin-left: 1px;
        }

        #main-nav.nav-tabs.nav-stacked > li > a {
            padding: 10px 8px;
            font-size: 12px;
            font-weight: 600;
            color: #4A515B;
            background: #E9E9E9;
            background: -moz-linear-gradient(top, #FAFAFA 0%, #E9E9E9 100%);
            background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FAFAFA), color-stop(100%,#E9E9E9));
            background: -webkit-linear-gradient(top, #FAFAFA 0%,#E9E9E9 100%);
            background: -o-linear-gradient(top, #FAFAFA 0%,#E9E9E9 100%);
            background: -ms-linear-gradient(top, #FAFAFA 0%,#E9E9E9 100%);
            background: linear-gradient(top, #FAFAFA 0%,#E9E9E9 100%);
            filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FAFAFA', endColorstr='#E9E9E9');
            -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#FAFAFA', endColorstr='#E9E9E9')";
            border: 1px solid #D5D5D5;
            border-radius: 4px;
        }

        #main-nav.nav-tabs.nav-stacked > li > a > span {
            color: #4A515B;
        }

        #main-nav.nav-tabs.nav-stacked > li.active > a, #main-nav.nav-tabs.nav-stacked > li > a:hover {
            color: #FFF;
            background: #3C4049;
            background: -moz-linear-gradient(top, #4A515B 0%, #3C4049 100%);
            background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4A515B), color-stop(100%,#3C4049));
            background: -webkit-linear-gradient(top, #4A515B 0%,#3C4049 100%);
            background: -o-linear-gradient(top, #4A515B 0%,#3C4049 100%);
            background: -ms-linear-gradient(top, #4A515B 0%,#3C4049 100%);
            background: linear-gradient(top, #4A515B 0%,#3C4049 100%);
            filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4A515B', endColorstr='#3C4049');
            -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#4A515B', endColorstr='#3C4049')";
            border-color: #2B2E33;
        }

        #main-nav.nav-tabs.nav-stacked > li.active > a, #main-nav.nav-tabs.nav-stacked > li > a:hover > span {
            color: #FFF;
        }

        #main-nav.nav-tabs.nav-stacked > li {
            margin-bottom: 4px;
        }

        /*定义二级菜单样式*/
        .secondmenu a {
            font-size: 10px;
            color: #4A515B;
            text-align: center;
        }

        .navbar-static-top {
            background-color: #212121;
            margin-bottom: 5px;
        }

        .navbar-brand {
            background: url('') no-repeat 10px 8px;
            display: inline-block;
            vertical-align: middle;
            padding-left: 50px;
            color: #fff;
        }
    </style>

</head>
<body>
<div class="navbar navbar-duomi navbar-static-top" role="navigation">
    <div class="container-fluid">
        <div class="navbar-header">
            <a class="navbar-brand" href="/device/searchDevice" id="logo">测试设备管理系统
            </a>
        </div>
    </div>
</div>
<div class="container-fluid">
    <div class="row">
        <div class="col-md-2">
            <ul id="main-nav" class="nav nav-tabs nav-stacked" style="">
                <li>
                    <a href="#logSetting1" class="nav-header collapsed" data-toggle="collapse">
                        <i class="glyphicon glyphicon-th-large"></i>
                        设备管理
                        <span class="pull-right glyphicon glyphicon-chevron-down"></span>
                    </a>
                    <ul id="logSetting1" class="nav nav-list collapse secondmenu" style="height: 0px;">
                        <li><a href="device/searchDevice"><i class="glyphicon glyphicon-phone"></i>设备列表</a></li>
                        <li><a href="http://www.umeng.com/"><i class="glyphicon glyphicon-globe"></i>友盟数据</a></li>
                        <li><a href="device/showPieChart"><i class="glyphicon glyphicon-calendar"></i>图表统计</a></li>
                    </ul>

                </li>
                <li>
                    <a href="device/searchApk">
                        <i class="glyphicon glyphicon-gift"></i>
                        安装包管理
                    </a>
                </li>
                <li>
                    <a href="#logSetting" class="nav-header collapsed" data-toggle="collapse">
                        <i class="glyphicon glyphicon-search"></i>
                        质量统计
                        <span class="pull-right glyphicon glyphicon-chevron-down"></span>
                    </a>
                    <ul id="logSetting" class="nav nav-list collapse secondmenu" style="height: 0px;">
                        <li><a href="device/logMonitoring"><i class="glyphicon glyphicon-eye-open"></i>ELK日志监控</a></li>
                        <li><a href="http://10.37.18.77:8430/index.html"><i class="glyphicon glyphicon-eye-open"></i>APP代码覆盖率</a></li>
                        <li><a href="http://10.37.18.82:8444/index.html"><i class="glyphicon glyphicon-eye-open"></i>平台代码覆盖率</a></li>

                        <li><a href="#"><i class="glyphicon glyphicon-eye-open"></i>PASSPORT日志监控</a></li>
                    </ul>

                </li>


                <li>
                    <a href="#systemSetting" class="nav-header collapsed" data-toggle="collapse">
                        <i class="glyphicon glyphicon-cog"></i>
                        系统管理
                        <span class="pull-right glyphicon glyphicon-chevron-down"></span>
                    </a>
                    <ul id="systemSetting" class="nav nav-list collapse secondmenu" style="height: 0px;">
                        <li><a href="#"><i class="glyphicon glyphicon-user"></i>用户管理</a></li>
                        <li><a href="#"><i class="glyphicon glyphicon-th-list"></i>菜单管理</a></li>
                        <li><a href="#"><i class="glyphicon glyphicon-asterisk"></i>角色管理</a></li>
                        <li><a href="#"><i class="glyphicon glyphicon-edit"></i>修改密码</a></li>
                        <li><a href="#"><i class="glyphicon glyphicon-eye-open"></i>日志查看</a></li>
                    </ul>
                </li>

                <li>
                    <a href="#">
                        <i class="glyphicon glyphicon-fire"></i>
                        关于系统
                    </a>
                </li>
            </ul>
        </div>
        <div class="col-md-10">

            <div class="container">
                <div>
                    <font size="6">图表看板:</font>
                </div>
                <div class="row">
                    <div class="col-md-11">
                        <!--statistics start-->
                        <div class="row state-overview">
                            <div class="col-md-4 col-xs-12 col-sm-6">
                                <div class="panel purple">
                                    <div class="symbol">
                                        <i class="fa fa-mobile-phone"></i>
                                    </div>
                                    <div class="state-value">
                                        <div class="value" id="countofalldevice">0</div>
                                        <div class="title">设备总数</div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-4 col-xs-12 col-sm-6">
                                <div class="panel red">
                                    <div class="symbol">
                                        <i class="fa fa-android"></i>
                                    </div>
                                    <div class="state-value">
                                        <div class="value" id="countofanddevice">0</div>
                                        <div class="title">安卓设备</div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-4 col-xs-12 col-sm-6">
                                <div class="panel deep-purple-box">
                                    <div class="symbol">
                                        <i class="fa fa-apple"></i>
                                    </div>
                                    <div class="state-value">
                                        <div class="value" id="countofiosdevice">0</div>
                                        <div class="title">苹果设备</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row state-overview">
                            <div class="col-md-4 col-xs-12 col-sm-6">
                                <div class="panel blue">
                                    <div class="symbol">
                                        <i class="fa fa-archive"></i>
                                    </div>
                                    <div class="state-value">
                                        <div class="value" id="countofallapk">0</div>
                                        <div class="title"> 安装包总数</div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-4 col-xs-12 col-sm-6">
                                <div class="panel green">
                                    <div class="symbol">
                                        <i class="fa fa-android"></i>
                                    </div>
                                    <div class="state-value">
                                        <div class="value" id="countofandapk">0</div>
                                        <div class="title"> 安卓包</div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-4 col-xs-12 col-sm-6">
                                <div class="panel yellow">
                                    <div class="symbol">
                                        <i class="fa fa-apple"></i>
                                    </div>
                                    <div class="state-value">
                                        <div class="value" id="countofiosapk">0</div>
                                        <div class="title"> 苹果包</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!--statistics end-->
                    </div>

                </div>
                <div>
                    <font size="5">手机都在哪?</font>
                </div>
                <div class="panel-body">
                    <div id="main2"
                         style="float:left;height: 400px; width: 960px; border: 1px dotted black">
                    </div>

                    </div>
                <div class="panel-body">
                    <div>
                        <font size="5">都有啥系统?</font>
                    </div>
                    <div id="main"
                         style="float:left;height: 400px; width: 480px; border: 1px dotted black">
                    </div>

                    <div id="main1"
                         style="float:left;height: 400px; width: 480px; border: 1px dotted black">
                    </div>

                    <br>
                </div>


                    <script type="text/javascript">








                        // 路径配置
                        require.config({
                            paths:{
                                'echarts' : 'http://echarts.baidu.com/build/echarts',
                                'echarts/chart/pie' : 'http://echarts.baidu.com/build/echarts'
                            }
                        });

                        // 使用
                        require(
                                [
                                    'echarts',
                                    'echarts/chart/pie' ,// 使用柱状图就加载bar模块，按需加载
                                    'echarts/chart/bar'
                                ],
                                DrawCharts
                        );

                        function DrawCharts(ec) {
                            drawAndroid(ec);
                            drawIOS(ec);
                            drawBar(ec);
                        }

                        function drawAndroid(ec) {
                            // 基于准备好的dom，初始化echarts图表
                            myChart = ec.init(document.getElementById('main'));

                            option = {
                                title : {
                                    text: '系统版本占比',
                                    subtext: 'Android',
                                    x:'center'
                                },
                                tooltip : {
                                    trigger: 'item',
                                    formatter: "{a} <br/>{b} : {c} ({d}%)"
                                },
                                legend: {
                                    orient : 'vertical',
                                    x : 'left',
                                    data:[]

                                },
                                toolbox: {
                                    show : true,
                                    feature : {
                                        mark : {show: true},
                                        dataView : {show: true, readOnly: false},
                                        restore : {show: true},
                                        saveAsImage : {show: true}
                                    }
                                },
                                calculable : true,
                                series : []
                            };

                            myChart.showLoading({
                                text: '正在努力的读取数据中...',
                            });

                            $.ajax({
                                url:'device/getChartJsonOfAndroid',
                                data: {},
                                dataType:'json',
                                success:function(data){
                                    var legendData=[];
                                    var seriesData=[];
                                    if(data!=null && data['series'].length>0){
                                        legendData=data['legend'];
                                        seriesData.push({
                                            'name':'系统版本占比',
                                            'type':'pie',
                                            'radius' : '55%',
                                            'center': ['50%', '60%'],
                                            'data':function(){
                                                var t_data=[];
                                                for(var i=0,len=data['series'].length;i<len;i++){
                                                    t_data.push({
                                                        'name':legendData[i],
                                                        'value':data['series'][i]
                                                    });
                                                }
                                                return t_data;
                                            }()
                                        });
                                    }
                                    option.legend.data=legendData;

                                    myChart.setOption(option);
                                    myChart.setSeries(seriesData);
                                },
                                error:function(){
                                    var legendData=[''];
                                    var seriesData = [
                                        {
                                            'name':'系统版本占比',
                                            'type':'pie',
                                            'radius' : '55%',
                                            'center': ['50%', '60%'],
                                            data: [0]
                                        }
                                    ];
                                    option.legend.data=legendData;
                                    myChart.setOption(option);
                                    myChart.setSeries(seriesData);

                                },
                                complete:function(){

                                    myChart.hideLoading();
                                }
                            });
                        }


                        function drawIOS(ec) {
                            // 基于准备好的dom，初始化echarts图表
                            myChartIOS = ec.init(document.getElementById('main1'));

                            option1 = {
                                title : {
                                    text: '系统版本占比',
                                    subtext: 'IOS',
                                    x:'center'
                                },
                                tooltip : {
                                    trigger: 'item',
                                    formatter: "{a} <br/>{b} : {c} ({d}%)"
                                },
                                legend: {
                                    orient : 'vertical',
                                    x : 'left',
                                    data:[]

                                },
                                toolbox: {
                                    show : true,
                                    feature : {
                                        mark : {show: true},
                                        dataView : {show: true, readOnly: false},
                                        restore : {show: true},
                                        saveAsImage : {show: true}
                                    }
                                },
                                calculable : true,
                                series : []
                            };

                            myChartIOS.showLoading({
                                text: '正在努力的读取数据中...',
                            });

                            $.ajax({
                                url:'device/getChartJsonOfIOS',
                                data: {},
                                dataType:'json',
                                success:function(data){
                                    var legendData=[];
                                    var seriesData1=[];
                                    if(data!=null && data['series'].length>0){
                                        legendData=data['legend'];
                                        seriesData1.push({
                                            'name':'系统版本占比',
                                            'type':'pie',
                                            'radius' : '55%',
                                            'center': ['50%', '60%'],
                                            'data':function(){
                                                var t_data=[];
                                                for(var i=0,len=data['series'].length;i<len;i++){
                                                    t_data.push({
                                                        'name':legendData[i],
                                                        'value':data['series'][i]
                                                    });
                                                }
                                                return t_data;
                                            }()
                                        });
                                    }
                                    option1.legend.data=legendData;

                                    myChartIOS.setOption(option1);
                                    myChartIOS.setSeries(seriesData1);
                                },
                                error:function(){
                                    var legendData=[''];
                                    var seriesData1 = [
                                        {
                                            'name':'系统版本占比',
                                            'type':'pie',
                                            'radius' : '55%',
                                            'center': ['50%', '60%'],
                                            data: [0]
                                        }
                                    ];
                                    option.legend.data=legendData;
                                    myChartIOS.setOption(option1);
                                    myChartIOS.setSeries(seriesData1);

                                },
                                complete:function(){

                                    myChartIOS.hideLoading();
                                }
                            });
                        }


                        function drawBar(ec) {
                            myChartBar = ec.init(document.getElementById('main2'));
                            option2 = {
                                title: {
                                    text: '测试手机分布-小组',
                                    x:'center'
                                },
                                tooltip: {
                                    trigger: 'axis'
                                },
                                legend: {
                                    data:[],
                                    y:'bottom'

                                },
                                toolbox: {
                                    show: true,
                                    feature: {
                                        mark: { show: true },
                                        dataView: { show: true, readOnly: false },
                                        magicType: { show: true, type: ['line', 'bar'] },
                                        restore: { show: true },
                                        saveAsImage: { show: true }
                                    }
                                },
                                xAxis: [{
                                    type: 'category',
                                    data:[]
                                }],
                                yAxis: [{
                                    type: 'value'
                                }],
                                series: []
                            };

                            // 载入动画---------------------
                            myChartBar.showLoading({
                                text: '正在努力的读取数据中...',    //loading话术
                            });

                            $.ajax({
                                url:'device/getBarChart',
                                data:{},
                                dataType:'json',
                                success:function(data){
                                    //后台需要返回以下结构的json数据
                                    var legendData=[];
                                    var xAxisData=[];
                                    var seriesData=[];
                                    if(data!=null && data['series'].length>0){
                                        legendData=data['legend'];
                                        xAxisData=data['axis'];
                                        seriesData.push({
                                            'name':'设备分布',
                                            'type':'bar',   //柱状图和拆线图类似只要将bar 改成line
                                            'data':data['series'],
                                            markPoint : {
                                                data : [
                                                    {type : 'max', name: '最大值'},
                                                    {type : 'min', name: '最小值'}
                                                ]
                                            },
                                            markLine : {
                                                data : [
                                                    {type : 'average', name: '平均值'}
                                                ]
                                            }
                                        });
                                    }
                                    option2.legend.data=[legendData];
                                    option2.xAxis[0]['data']=xAxisData;

                                    myChartBar.setOption(option2);
                                    myChartBar.setSeries(seriesData);
                                },
                                error:function(){
                                    var legendData=[''];
                                    var xAxisData=[''];
                                    var seriesData = [
                                        {
                                            name:'订单数',
                                            type: 'bar',    //柱状图和拆线图类似只要将bar 改成line
                                            data: [0]
                                        }
                                    ];
                                    option2.legend.data=[legendData];
                                    option2.xAxis[0]['data']=xAxisData;

                                    myChartBar.setOption(option2);
                                    myChartBar.setSeries(seriesData);

                                },
                                complete:function(){
                                    //停止动画载入提示
                                    myChartBar.hideLoading();
                                }
                            });
                        }


                    </script>
                </div>
            </div>

        </div>
    </div>
</div>
</div>
</div>
</body>


</html>